<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport"
          content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <title>求购</title>
    <link rel="stylesheet" type="text/css" href="../css/aui.css"/>
    <style>
        body {
            background: #fff;
            font-size: 13px;
        }

        .contain-left {
            width: 25%;
            text-align: center;
            float: left;
        }

        .contain-left .aui-list-view-cell {
            padding: 12px;

        }

        .aui-list-view:after {
            border: none;
        }

        .contain-left .active {
            color: #fa5354;
            border: none;
            background: #f3f3f2
        }

        .contain-right {
            padding: 12px;
            width: 75%;
            float: left;
        }

        .contain-right .pic img {
            width: 100%;
        }

        .tuijian-title {
            padding: 8px;
        }

        .other {
            display: none;
            text-align: center;
        }

        .other .aui-list-view-cell {
            padding: 8px 0;
        }

        .other .aui-list-view-cell:after {
            border: none;
        }
        .aui-list-view .aui-img-object{
            height: 60px !important;
        }
    </style>
</head>
<body>
<header>
    <div class="search">
        <div class="aui-searchbar-wrap demo" id="search">
            <div class="aui-searchbar aui-border-radius" tapmode onclick="doSearch()">
                <i class="aui-iconfont aui-icon-search"></i>

                <div class="aui-searchbar-text">请输入搜索内容</div>
                <div class="aui-searchbar-input">
                    <form action="javascript:search();">
                        <input type="search" placeholder="请输入搜索内容" id="search-input">
                    </form>
                </div>
                <i class="aui-iconfont aui-icon-roundclosefill" tapmode onclick="clearInput()"></i>
            </div>
            <div class="aui-searchbar-cancel aui-text-info" tapmode onclick="cancelSearch()">取消</div>
        </div>
    </div>
</header><!-- /header -->
<div class="contain">
    <div class="contain-left">
        <div class="aui-content">
            <ul class="aui-list-view" id='Category-content'>
            </ul>
        </div>
    </div>
    <div class="contain-right">
        <div class="pic">
            <img src="../image/gongying.jpg" alt="">
        </div>
        <div class="tuijian">
            <!-- 推荐 热门分类 -->
            <div class="aui-content"  id='Hot-content'>
                <!--<div class="tuijian-title">品牌推荐</div>-->
                <!--<ul class="aui-list-view aui-grid-view" id="Other-content">-->
                <!--</ul>-->

            </div>
        </div>
        <!-- 非热门 -->
        <div class="other">
            <ul id="Other-content">

            </ul>
        </div>
    </div>
</div>
<script id="Category-template" type="text/x-dot-template">

    <li class="aui-list-view-cell  active" tapmode onclick="changeTheCategory(this)">
        商品推荐
    </li>
    {{ for(var i in it) { }}
    <!--{{? i == 0}}-->
    <!--{{??}}-->
    <li class="aui-list-view-cell aui-border-l aui-border-r"
        onclick='categorySubordinate({{=it[i].catid}}),changeTheCategory(this)'>
        {{=it[i].catname}}
    </li>
    {{?}}
    {{ } }}

</script>
<script id="Hot-template" type="text/x-dot-template">
    {{ for(var i in it) { }}
    <div class="aui-content">
        <div class="tuijian-title aui-ellipsis-1">{{=it[i].catname}}</div>
        <ul class="aui-list-view aui-grid-view">
            {{ for(var b in it[i].arr) { }}
            <li class="aui-list-view-cell aui-img aui-col-xs-4"
                {{? it[i].catname== '品牌推荐'}}
            onclick='toBrandList({{=it[i].arr[b].itemid}},"{{=it[i].arr[b].title}}")'
            {{??}}
            onclick='toCategoryList({{=it[i].arr[b].catid}},"{{=it[i].arr[b].catname}}")'
            {{?}}
            >
            <img class="aui-img-object" src="
                {{? it[i].catname == '品牌推荐'}}
                {{=it[i].arr[b].thumb}}
                {{??}}
                {{=it[i].arr[b].image_src}}
                {{?}}
                ">

            <div class="aui-img-body aui-ellipsis-1">
                {{? it[i].catname == '品牌推荐'}}
                {{=it[i].arr[b].title}}
                {{??}}
                {{=it[i].arr[b].catname}}
                {{?}}
            </div>
            </li>
            {{ } }}
        </ul>
    </div>
    {{ } }}
</script>
<script id="Other-template" type="text/x-dot-template">
    {{ for(var i in it) { }}
    <li class="aui-list-view-cell aui-img aui-col-xs-4" onclick="toCategoryList({{=it[i].catid}},'{{=it[i].catname}}')">
        <div class="aui-img-body">
            {{=it[i].catname}}
        </div>
    </li>
    {{ } }}
</script>
</body>
<script type="text/javascript" src="../script/api.js"></script>
<script type="text/javascript" src="../script/doT.min.js"></script>
<script type="text/javascript" src="../script/echo.js"></script>
<script type="text/javascript" src="../script/common.js"></script>
<script type="text/javascript" src="../script/myInfo.js"></script>
<script type="text/javascript" src="../script/jquery-1.11.3.js"></script>
<script type="text/javascript">
    apiready = function () {
        api.parseTapmode();
        CategoryOne();
    }
    function changeTheCategory(obj) {
        $(".contain-left li").removeClass("active").addClass("aui-border-l").addClass("aui-border-r");
        $(obj).addClass("active").removeClass("aui-border-l").removeClass("aui-border-r");
        if ($(obj).index() == 0) {
            $(".tuijian").css({"display": "block"});
            $(".other").css({"display": "none"});
        } else {
            $(".tuijian").css({"display": "none"});
            $(".other").css({"display": "block"});
        }
    }
    ///切换左侧分类的样式
//    $(document).on("click0", ".contain-left .aui-list-view-cell", function () {
//        alert("dd")
//        $(".contain-left li").removeClass("active").addClass("aui-border-l").addClass("aui-border-r");
//        $(this).addClass("active").removeClass("aui-border-l").removeClass("aui-border-r");
//        if ($(this).index() == 0) {
//            $(".tuijian").css({"display": "block"});
//            $(".other").css({"display": "none"});
//        } else {
//            $(".tuijian").css({"display": "none"});
//            $(".other").css({"display": "block"});
//        }
//    })
    function doSearch() {
        api.openWin({
            name: "search",
            url: "search.html",
            pageParam: {
                type:"pinpaishang"
            }
        })
//        $api.addCls($api.dom(".aui-searchbar-wrap"), "focus");
//        $api.dom('.aui-searchbar-input input').focus();
    }
    function cancelSearch() {
        $api.removeCls($api.dom(".aui-searchbar-wrap.focus"), "focus");
        $api.val($api.byId("search-input"), '');
        $api.dom('.aui-searchbar-input input').blur();
    }
    function clearInput() {
        $api.val($api.byId("search-input"), '');
    }
    function search() {
        var content = $api.val($api.byId("search-input"));
        if (content) {
            api.alert({
                title: '搜索提示',
                msg: '您输入的内容为：' + content
            });
        } else {
            api.alert({
                title: '搜索提示',
                msg: '您没有输入任何内容'
            });
        }
        cancelSearch();
    }

    //增加商品推荐分类及一级分类
    function CategoryOne() {
        showLoading();
        var data = {
            'moduleid': '6',
        };
        var url = 'category/categoryOne';
        ajaxRequest(url, 'get', data, function (ret, err) {
            if (ret.status == 1) {
                var content = $api.byId('Category-content');
                var tpl = $api.byId('Category-template').text;
                var tempFn = doT.template(tpl);
                $api.html(content, '');
                $api.prepend(content, tempFn(ret.msg));
                hideLoading();
                //商品推荐
                var content = $api.byId('Hot-content');
                var tpl = $api.byId('Hot-template').text;
                var tempFn = doT.template(tpl);
                $api.html(content, '');
                $api.prepend(content, tempFn(ret.msg[0].arr));
                //图片延时加载
                echo.init({
                    offset: 0,
                    throttle: 250
                });
            } else {
                hideLoading();
                api.toast({
                    msg: ret.msg,
                    duration: 2000,
                    location: 'bottom'
                })
            }
        })
    }

    function tobrand() {
        api.openWin({
            name: 'pinpaishang_win',
            url: 'pinpaishang_win.html',
            reload: true,
            //delay: 300
        });
    }

    //增加分类下面下级分类
    function categorySubordinate(catid) {
        showLoading();
        var data = {};
        if (catid == '' || catid == null) {
            categoryImage();
        }
        var url = 'category/categorysubordinate/parentid/' + catid + '/moduleid/6';
        ajaxRequest(url, 'get', data, function (ret, err) {
            var content = $api.byId('Other-content');
            $api.html(content, '');
            if (ret.status == 1) {
                var tpl = $api.byId('Other-template').text;
                var tempFn = doT.template(tpl);
                $api.prepend(content, tempFn(ret.msg.arr));
//                var categoryImage = $api.byId('categoryImage');
                $('#categoryImage').attr('src', ret.msg.top_src);
                hideLoading();
                //图片延时加载
                echo.init({
                    offset: 0,
                    throttle: 250
                });
            } else {
                hideLoading();
                if (catid) {
                    api.toast({
                        msg: '数据为空',
                        duration: 2000,
                        location: 'bottom'
                    })
                }

            }
            if (err) {
                hideLoading();
                if (catid) {
                    api.toast({
                        msg: '网络错误',
                        duration: 2000,
                        location: 'bottom'
                    })
                }
            }
        })
    }

    //商品推荐分类顶图
    function categoryImage() {
        var data = {};
        var url = 'category/categoryImage';
        ajaxRequest(url, 'get', data, function (ret, err) {
            if (ret.status == 1) {
                $('#categoryImage').attr('src', ret.msg);
            } else {
                api.toast({
                    msg: ret.msg,
                    duration: 2000,
                    location: 'bottom'
                })
            }
        })
    }

    //打开商品列表
    function toCategoryList(catId,catName) {
        api.openWin({
            name: 'wantBuyList_win',
            url: 'wantBuyList_win.html',
            pageParam: {
                categoryId: catId,
                categoryName:catName
            },
            //delay: 300
        });
    }


    //打开品牌商品列表
    function toBrandList(brand,brandName) {
        api.openWin({
            name: 'brandList_win',
            url: 'brandList_win.html',
            pageParam: {
                brand: brand,
                brandName:brandName
            },
            //delay: 300
        });
    }
</script>
</html>